<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box{
        width: 550px;
        height: 300px;
        position: relative;
        cursor: pointer;
    }
    .box:hover .w{
        height: 100%;
        width: 60%;
    }
    .w{
        -webkit-transition: all 1s;
        transition: all 2s;
        position: absolute;
        bottom: 0;
        opacity: 55%;
        height: 0;
        overflow: hidden;
    }
    img{
        width: 100%;
        height: 120%;
        position: absolute;
    }
</style>
<body>
    <div class="box">
        <a href="https://music.163.com/#/song?id=191232"><img src="./遥远的她.jpg" alt=""></a>
        <a href="https://baike.baidu.com/item/%E9%81%A5%E8%BF%9C%E7%9A%84%E5%A5%B9/6644093?fr=ge_ala" class="w"><img src="./播放键.png" class="j" alt=""></a>
        <p><strong>遥远的她</strong></p>
    </div>
</body>
</html>